<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>web前端验证码</title>
  <!-- https://mp.weixin.qq.com/s/KAQ90WY4gbF8EVACt8CuMQ -->
  <style>
    *,
    *::after,
    *::before {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      min-height: 100vh;
      -webkit-tap-highlight-color: transparent;
    }

    :root:focus-within {
      scroll-behavior: smooth;
    }

    body {
      min-height: inherit;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 30px;
    }

    /* 滑块-- */
    .slide {
      --w: 250;
      --h: 45;
      width: calc(var(--w) * 1px);
      height: calc(var(--h) * 1px);
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50px;
      color: #88949d;
      background-color: #dfe1e2;
      text-align: center;
      border: 1px solid #d4d4d4;
      box-sizing: 0px 0px 4px 4px #d4d4d4;
      user-select: none;
      position: relative;
    }

    .trager {
      --left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: calc((var(--h) + 23) * 1px);
      height: calc((var(--h) + 23) * 1px);
      border-radius: 50%;
      cursor: pointer;
      background-color: #fff;
      border: 1px solid #d4d4d4;
      box-sizing: 0px 0px 4px 4px #d4d4d4;
      position: absolute;
      left: calc(var(--left) * 1px);
      transform: translateX(-50%);
      -webkit-tag-highlight-color: transparent;
    }

    /* 滑块== */

    #canvas {
      background-color: pink;
    }
  </style>
</head>

<body>
  <!-- <div class="verification">
    <input type="range" id="slider" min="0" max="100" value="0">
  </div> -->
  <canvas id="canvas" style="width: 300px;height: 200px;"></canvas>
  <div class="slide">
    <div class="trager">滑块</div>
    滑动完成上方拼图
  </div>
  <!-- <div class="tips">点击按钮进行验证</div> -->
</body>
<script>
  "use strict"; {
    let trager = document.querySelector(".trager")
    let maxLeft = Number(getComputedStyle(trager.parentNode).getPropertyValue("--w"))

    let startX = 0, left = 0
    trager.addEventListener("touchstart", e => {
      // startX 触摸点下的位置
      startX = e.changedTouches[0].clientX
      // 开始的位置
      left = e.target.offsetLeft
    })

    trager.addEventListener("touchmove", function (e) {
      // 触摸点移动时的位置。x - startX 位置的变化量
      let x = e.changedTouches[0].clientX
      // left + x - startX 滑块最终的位置
      let changLeft = left + x - startX
      // 判断是否超出范围，若超出了则不做处理
      if (changLeft < 0 || changLeft > maxLeft) return void console.log("超出范围了")
      this.style.setProperty("--left", changLeft)
    })

    let canvas = document.getElementById("canvas")
    const ctx = canvas.getContext("2d")

  };
</script>

</html>